<template>
  <view
    class="hb-rounded-sm hb-border hb-border-solid hb-h-4.5 hb-px-2 hb-text-[20rpx] hb-flex-shrink-0 hb-flex hb-items-center hb-justify-center"
    :style="getStyle"
  >
    <text v-if="status === ReviewStatusEnum.PENDING">待审核</text>
    <text v-if="status === ReviewStatusEnum.APPROVED">{{ type === 'friend' ? '已添加' : '已同意' }}</text>
    <text v-if="status === ReviewStatusEnum.REJECTED">已拒绝</text>
  </view>
</template>

<script setup lang="ts">
  import { ReviewStatusEnum } from '@/enums/PublicEnum';
  import type { CSSProperties } from 'vue';

  const props = defineProps<{
    status: ReviewStatusEnum;
    type: 'friend' | 'circle';
  }>();

  const getStyle = computed((): CSSProperties => {
    if (props.status === ReviewStatusEnum.PENDING) {
      return {
        color: '#2878FF',
        borderColor: '#2878FF',
      };
    }
    if (props.status === ReviewStatusEnum.APPROVED) {
      return {
        color: '#fff',
        borderColor: '#2878FF',
        backgroundColor: '#2878FF',
      };
    }
    if (props.status === ReviewStatusEnum.REJECTED) {
      return {
        color: '#EA5E0E',
        borderColor: '#EA5E0E',
      };
    }
    return {};
  });
</script>

<style scoped></style>
